<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TodoList</title>
    <style>
        .completed {
            text-decoration: line-through;
        }

        .selected {
            color: red;
        }
    </style>
</head>
<body>
<div id="tolove-app">
  <div>
      <input type="button" value="全部标为完成 make love"/>
      <input type="text" placeholder="添加心仪的Girl">
  </div>
    <ul>
    <li>
        <span class="completed">约会林志玲</span>
        <input type="button" value="标为完成">
        <input type="button" value="删除">
        <input type="text" value="编辑 tolove..."/>
    </li>
    <li>
        <span>亲吻林志玲</span>
        <input type="button" value="标为完成">
        <input type="button" value="删除">
        <input type="text" value="编辑 tolove..."/>
    </li>
    <li>
        <span>与林志玲大战三百回合，走上人生巅峰！</span>
        <input type="button" value="标为完成">
        <input type="button" value="删除">
        <input type="text" value="编辑 tolove..."/>
    </li>
    </ul>
    <div>
        <span>剩余 3 项未完成 ---</span>
        <span>筛选：
      <input type="button" class="selected" value="全部">
      <input type="button" value="进行中">
      <input type="button" value="已完成">
      <input type="button" value="清除已完成">
      <input type="button" value="清除全部">
    </span>
    </div>
    <div>
        <ul>
            <li v-for="todo in todos": key=""todo.id>
                <span>{{todo.title}}</span>
                <input type="button" value="标为完成">
                <input type="button" value="删除">
                <input type="text" value="编辑 tolove..."/>
            </li>
        </ul>
    </div>
</div>
<script src="../js/vue.js"></script>
<script>
    var app=new Vue({
        el: '#tolove-app',
        data:function () {
            return {
                todos:[

                    {id:0,title:"约会小龙女"},
                    {id:1,title:"牵手小龙女"},
                    {id:2,title:"接吻小龙女"},
                    {id:3,title:"获取小龙女一血"},

                ]
            }
        }
    })
</script>
</body>
</html>